/**
 * webpack.config.js webpack的配置文件
 *  作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）
 * 
 *  所有的构建工具都是给予nodejs平台运行的。模块化默认采用commonjs。
*/
// resolve用来拼接绝对路径的方法
const {resolve} = require('path')

module.exports = {
    // webpack配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output:{
        // 输出的文件名
        filename: 'built.js',
        // 输出的路径
        // __dirname nodejs的变了，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module:{
        rules:[
            // 详细的loader配置
            // 不同文件必须配置不同loader处理
            {
                // 表示匹配哪些文件(以.css结尾)
                test: /\.css$/,
                // 使用哪些loader进行处理
                use:[
                    // use数组中loader执行顺序，从右到做，从下到上，依次执行
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
                    'css-loader'
                ]
            },
            {
                // 表示匹配哪些文件(以.less结尾)
                test: /\.less$/,
                // 使用哪些loader进行处理
                use:[
                    // use数组中loader执行顺序，从右到做，从下到上，依次执行
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
                    'css-loader',
                    // 将less文件编译成css文件
                    // 需要下载less-loader和less
                    'less-loader',
                ]
            },
        ]
    },
    // plugins的配置
    plugins:[
        // 详细的plugins配置
    ],
    // 模式（开发模式）
    mode: 'development'
}